<template>
  <div :loading="loading" class="app-container">
    <!--对象操作-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Back" @click="handleBack">
          返回
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Edit"
          @click="handleEdit"
          v-hasPermi="['pms:req:edit']"
          >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          @click="handleDelete"
          v-hasPermi="['pms:req:delete']"
          >删除
        </el-button>
      </el-col>
      <y-history-toolbar
        :prefix="form.prefix"
        :historys="historys"
        :command="handleCommand"
      />
    </el-row>

    <!-- 信息展示 -->
    <el-row :gutter="10">
      <!-- 左侧详情展示 -->
      <el-col :lg="16" :xs="24">
        <reqs-card :version="id" />
        <br />
        <bugs-card :version="id" />
        <br />
        <el-card>
          <div class="card-header">
            <h4><strong>备注信息</strong></h4>
          </div>
          <div class="card-body">
            {{ form.remark }}
          </div>
        </el-card>
      </el-col>

      <!-- 右侧属性展示 -->
      <el-col :lg="8" :xs="8">
        <el-card>
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="1">
              <el-descriptions direction="vertical" :column="1" border>
                <el-descriptions-item label="版本名称">{{
                  form.name
                }}</el-descriptions-item>
                <el-descriptions-item label="所属产品">
                  <router-link
                    v-if="form.product"
                    :to="'/pms/product-info/index/' + form.product.value"
                    class="link-type"
                  >
                    <span>{{ form.product.label }}</span>
                  </router-link>
                </el-descriptions-item>
                <el-descriptions-item label="父版本">
                  <router-link
                    v-if="form.parent"
                    :to="'/pms/version-info/index/' + form.parent.value"
                    class="link-type"
                  >
                    <span>{{ form.parent.label }}</span>
                  </router-link>
                </el-descriptions-item>
                <el-descriptions-item label="负责人">{{
                  form.owner
                }}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{
                  form.creator_name
                }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{
                  form.create_time
                }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                  <y-dict-tag
                    :options="sys_enable_disable"
                    :value="form.status"
                  />
                </el-descriptions-item>
                <el-descriptions-item label="标签">
                  <y-tag v-model="form.tags" :editable="false" />
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加或修改对话框 -->
    <au-ver
      :id="id"
      v-model="open"
      :title="title"
      :operate="operate"
      :getMethod="getVersion"
      :updateMethod="updateVersion"
      @submited="submited"
      @close="open = false"
    >
    </au-ver>
  </div>
</template>

<script setup name="VersionInfo">
import {
  getVersion,
  getHistory,
  updateVersion,
  delVersion,
} from "@/api/pms/version";
import AuVer from "./components/AuVer";
import ReqsCard from "@/views/pms/requirement/components/ReqsCard";
import BugsCard from "@/views/tms/bug/components/BugsCard";

const { proxy } = getCurrentInstance();
const { sys_enable_disable } = proxy.useDict("sys_enable_disable");

const data = reactive({
  form: {},
});
const { form } = toRefs(data);

const id = proxy.$route.params.id;
const open = ref(false);
const title = ref("");
const operate = ref("update");
const loading = ref(false);
const activeName = ref("1");
const historys = ref([]);

/** 获取版本详情 */
function getInfo() {
  loading.value = true;
  getVersion(id).then((response) => {
    form.value = response.data;
    loading.value = false;
  });
  getHistory(id).then((res) => {
    historys.value = res.data;
  });
}

/** 查询某条历史记录 */
function handleCommand(command) {
  form.value = command;
}

/** 返回按钮操作 */
function handleBack() {
  proxy.$router.back();
}

/** 修改操作 */
function handleEdit() {
  open.value = true;
  title.value = "修改版本";
}

/** 删除按钮操作 */
function handleDelete() {
  proxy.$modal
    .confirm(
      '是否确认删除版本"' +
        form.value.name +
        '"的数据项？若确认删除，该版本关联信息也将被删除！'
    )
    .then(() => {
      return delVersion(id);
    })
    .then(() => {
      proxy.$modal.msgSuccess("删除成功");
      handleBack();
    })
    .catch(() => {});
}

/** 组件挂载完成事件 */
onMounted(() => {
  getInfo();
});

/** 添加/修改对象后触发事件 */
function submited() {
  getInfo();
}
</script>
